let data = [
    {value:'aaaa',time:5,color:'red',speed:1,fontSize:20},
    {value:'bbbb',time:5,color:'red',speed:1,fontSize:20},
    {value:'cccc',time:5,color:'red',speed:1,fontSize:20},
    {value:'dddd',time:5,color:'red',speed:1,fontSize:20}
]


let canvas = document.getElementById('canvas')
let video = document.getElementById('video')
let $text = document.getElementById('text')
let $btn = document.getElementById('btn')
let $color=document.getElementById('color')
let $range = document.getElementById('range')

class CanvasBarrage{
    constructor(canvas,video,options = {}){ //初始化
        if (!ca || !video) return
        this.canvas = canvas
        this.video = video
        this.canvas.width = video.width
        this.canvas.height = video.height
        // 创建画布
        this.ctx = canvas.getContext('2d')
        //设置默认参数
        let defOpts = {
            color:'#fff',
            speed:1.5,
            opaity:0.5,
            fontSize:20,
            data:[]
        }
        Object.assign(this,defOpts,options)
        this.isPaused = true //初始为暂停状态
        //读取所有的弹幕消息，将每一条弹幕将来的样式处理好
        this.Barrages = this.data.map((item) => {
            return new Barrage(item,this)
        })
        
        //渲染所有弹幕
        this.render()




    }
    render() {
        //往画布上绘制内容前先清理画布
        this.clear()
        this.renderBarrages()
        if (!this.isPaused) {
            requestAnimationFrame(this.render.bind(this))
        }

    }

    clear() {
        this.ctx.clearRect(0,0,this.canvas.width,this.canvas.height)
    }

    renderBarrages() {
        //读取到视频此时播放的·时间
        let time = this.video.currentTime * 1000 //转换成毫秒
        this.Barrages.forEach(barrage => {
            if (time >= barrage.startTime && time <= barrage.endTime) {

                //弹幕是否初始化过
                if (!barrage.isInit) {
                    barrage.init()
                    barrage.isInit = true
                }
                //绘制弹幕
                barrage.x -= barrage.speed
                barrage.render()
                //弹幕超出画布左侧，则标记为已删除
                if (barrage.x < -barrage.width) {
                    barrage.flag = true

                }
            }
        })

    }

}   
    //处理每一条弹幕对象
    class Barrage{
        coanstructor(obj,ctx){ //初始化
            this.value = obj.value;
            this.time = obj.time;
            this.obj = obj;
            this.context = ctx

    }
    init(){
        this.width = this.context.ctx.measureText(this.value).width
        this.height = 20;
        this.x = this.context.canvas.width + 10;
        this.y = Math.random() * (this.context.canvas.height - this.height)
        this.startTime = this.time * 1000 //转换成毫秒
        this.endTime = this.startTime + 5000
    }
    render(){
        this.context.ctx.fillStyle = this.obj.color
        this.context.ctx.font = `${this.obj.fontSize}px Arial`;
        this.context.ctx.fillText(this.value,this.x,this.y)
    }

}


let canvasBarrage = new CanvasBarrage(canvas,video,{data})

video.addEventListener('play',() => { 
    canvasBarrage.isPaused = false;
    canvasBarrage.render() //开始渲染所有弹幕
})